<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>photo_bigger</title>
    <script src="../bootstrap/jquery-3.3.1.min.js"></script>
</head>
<style>
* {
    margin: 0;
    padding: 0;
}
.bgGlass{
	position: relative;
	width: 90%;
	height: 600px;
	margin: 30px auto;
}
.sm_box{
	display: inline-block;
	margin: 50px;
	cursor: move;
	position: relative;
}
.big_box{
	position: relative;
	display: inline-block;
	width: 300px;
	height: 224px;
	margin: 50px;
	background: #fff;
	overflow: hidden;
	vertical-align: top;
	opacity: 0.1;
}
.lg{
	position: absolute;
}
.float{
	float: left;
	position: absolute;
	width: 50%;
	height: 50%;
	z-index: 1;
	background: yellow;
	opacity: 0;
}
</style>

<body>
    <!-- 
	分析 设计 实现
	鼠标在小图片上移动时，大图片会一起移动，获取位置信息
	页面元素 事件绑定和捕获 mouserover,out,move 
	clientx clienty 鼠标相对view的位置，
	style.获取的值只能从html中获取，offsetLeft 
	同步移动计算
	offset + Left Top Width Height 不包括滚动条 
	event.clientX Y 相对页面的坐标
	style.是可读可写的 ，其他一般就可读，但是读取style的值需要事先声明
-->
    <div class="bgGlass" id="bgGlass">
        <div class="sm_box" id="sb">
            <div class="float" id="float"></div>
            <img src="zhy.jpg" alt="" id="sm" style="width: 300px">
        </div>
        <div class="big_box" id="bb"><img src="zhy.jpg" alt="" class="lg" id="lg" style="width: 600px" ></div>
    </div>
    <span id="x"></span>
    <span id="y"></span>
</body>
<script>
// console.log($('img'));
window.onload = function(){
	var bg=document.getElementById('bgGlass')
	var sb=document.getElementById('sb')
	var fb=document.getElementById('float')
	var bb=document.getElementById('bb')
	var lg=document.getElementById('lg')
	var xx=document.getElementById('x')
	var yy=document.getElementById('y')
sb.onmouseover=function () {
	bb.style.opacity=1;
	fb.style.opacity=.5;
}
sb.onmouseout=function () {
	bb.style.opacity=0.1;
	fb.style.opacity=0;
}
sb.onmousemove=function(ev) {
	var tt=ev;
	// console.log(tt);
	xx.innerHTML=tt.clientX;
	yy.innerHTML=tt.clientY;
	var left=tt.clientX-bg.offsetLeft-fb.offsetWidth/2;
	var top=tt.clientY-bg.offsetTop-fb.offsetHeight/2;
	console.log(left)
	console.log(top)
	if(left<0){
		left=0;
	}else if(left>(sb.offsetWidth-fb.offsetWidth)){
		left=sb.offsetWidth-fb.offsetWidth;
	}
	if(top<0){
		top=0;
	}else if(top>(sb.offsetHeight-fb.offsetHeight)){
		top=sb.offsetHeight-fb.offsetHeight
	}
	fb.style.left=left+'px';
	fb.style.top=top+'px';

	var x=left/(sb.offsetWidth-fb.offsetWidth)
	var y=top/(sb.offsetHeight-fb.offsetHeight)

	lg.style.left=-x*(lg.offsetWidth -bb.offsetWidth)+'px';
	lg.style.top=-y*(lg.offsetHeight -bb.offsetHeight)+'px';

}



}
</script>

</html>